<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!--
本模块功能:岗位技能
编写者:王天宇
编写时间:2020.03.18
-->
<!DOCTYPE html>
<html class="wrap">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>岗位技能</title>


	<link rel="stylesheet" type="text/css" href="pc/css/cores/style.css" /><!--公共样式-->


	<link rel="stylesheet" type="text/css" href="pc/css/extends/list.css" /><!--翻页插件样式-->
	<link rel="stylesheet" type="text/css" href="pc/css/cores/alert.css" /><!--弹出盒样式-->
	<link rel="stylesheet" type="text/css" href="pc/css/cores/public.css" /><!--公共样式-->

	<%--<link rel="stylesheet" type="text/css" href="pc/css/modules/teacherClassManagement.css?f=<%=System.currentTimeMillis()%>" />--%>
	<style>
		#table {
			border-collapse: collapse;
		}

		#table th {
			background: #385276;
			color: #fff;
			border: 1px solid #eeeeee;
			font-size: 16px;
			padding: 10px 0;
		}

		#table td {
			border: 1px solid #eeeeee;
			padding: 20px;
			color: #000;
			white-space: normal;
		}

		#table .edit-table-item {
			background: #385276;
			border-radius: 4px;
			padding: 3px 8px;
			display: inline-block;
			font-size: 14px;
			color: #fff;
			cursor: pointer;
			margin-left: 10px;
		}


		#Popup{/*弹出层*/
			top:0;left: 0;position: fixed;width: 100%;display: none;
			z-index: 80;
		}

		#popupBackground{
			top:0;left: 0;position: fixed;width: 100%;height: 100%;display: none;
			z-index: 60;
		}
		#Popup .weightValue {width: 500px;/*height: 354px;*/padding-bottom:70px;margin:0 auto;border-radius: 5px;background: #fff;margin-top:10%;overflow: hidden;position: relative;}
		#Popup .weightValue .popup_contenthead span {line-height: 40px;width:40px;display: block;text-align: center;}
		#Popup .weightValue .popup_contenthead img {display:inline-block;}
		#Popup .weightValue .down {position: absolute;bottom: 0;width: 100%;height: 70px;line-height: 70px;padding-top: 18px;}
		#Popup .weightValue .down .publicBtn {margin: 0 auto;}
		#Popup .weightValue .pop_main {width: 460px;margin:0 auto;font-size: 16px; padding-top: 5px; line-height: 24px;}
		#Popup .weightValue .pop_main .inputRight{margin:20px auto;width: 210px;margin-top: 12px;}
		#Popup .weightValue .pop_main .prompt>span{width:45px;display: block;margin-top: 30px;}
		#Popup .weightValue .pop_main .prompt>ul{width:400px;display: block;margin-top: 30px;}
		#Popup .weightValue .pop_main label{line-height: 34px;width: 44px;}


		#Popup .setWeightValue {width: 500px;/*height: 354px;*/padding-bottom:70px;margin:0 auto;border-radius: 5px;background: #fff;margin-top:10%;overflow: hidden;position: relative;}
		#Popup .setWeightValue .popup_contenthead span {line-height: 40px;width:40px;display: block;text-align: center;}
		#Popup .setWeightValue .popup_contenthead img {display:inline-block;}
		#Popup .setWeightValue .down {width: 100%;line-height: 70px;    margin-top: 110px;}
		#Popup .setWeightValue .down .publicBtn {margin: -36px auto 0;}
		#Popup .setWeightValue .pop_main {    height: 180px;width: 332px;margin:0 auto;font-size: 16px; padding-top: 5px;  line-height: 24px;background: url(../../images/bg_setScore.png) no-repeat bottom 20px center;background-size:contain;}
		#Popup .setWeightValue .pop_main .inputRight{margin:20px auto;width: 210px;margin-top: 12px;}
		#Popup .setWeightValue .pop_main .prompt>span{width:45px;display: block;margin-top: 30px;}
		#Popup .setWeightValue .pop_main .prompt>ul{width:286px;display: block;margin-top: 30px;}
		#Popup .setWeightValue .pop_main label{line-height: 34px;width: 28px;}

		/*是否选课*/
		#sex{width:278px;margin:16px auto 30px auto;}
		.sex input {
			display: none;
		}

		.sex label {
			background: url(../../images/radio.png) center left no-repeat;
			padding-left: 20px;
			width: 60px;
			margin-right: 35px;
		}
		.sex label:nth-of-type(1){margin-left: 0;}
		.sex label.checked {
			background: url(../../images/radio_check.png) left center no-repeat;
		}

		.sex span {
			font-size: 16px;
		}
		.sex .positionArea{position:relative;}
		.sex .positionArea:hover .bubble{display:block}
		.bubble {position:absolute;left:-120px;top:-34px;width:310px;border:2px solid #dcdcdc;z-index: 100;border-radius: 8px;background:#fff;color:#000;display: none;overflow: initial;}
		.bubble span{position:absolute;left:40%;bottom:-22px;border-width:11px;border-style:solid dashed dashed dashed; border-color: #dcdcdc  transparent transparent transparent;font-size:0; line-height:0;}
		.bubble em{ position:absolute; bottom:-16px; left:41%;border-width:8px;border-style:solid  dashed dashed dashed; border-color: #FFF transparent transparent transparent;font-size:0; line-height:0;}
		.bubble p{text-align:center;height:24px;line-height: 26px;margin:0;padding-left: 10px;font-size: 14px;}
		.bubble p:hover{background: #e9f0f8;}

		.main-title{
			padding: 10px 0 30px;
			margin-bottom:20px;
			position: relative;
			border-bottom:2px solid #ccc;
		}
		.main-title h2{
			text-align: center;
		}
		.main-title > div{
			position: absolute;
			right:0;
			top:20px;
		}
		.main-title .publicBtn{
			width:auto;
			padding:0 20px;
			margin-left:20px;
		}
		.file-box{
			position: relative;
			overflow: hidden;
		}
		.file-box #myfile{
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			opacity: 0;
			cursor: pointer;
		}
	</style>
</head>

<body>
<div class="crumbs">
	<div class="fl returnBox"><!-- &ensp;<img src="pc/images/ico_return.png" alt="返回按钮" />&ensp;
				<a class="looktg" href="javascript:;" onClick="javascript:window.history.go(-1)">返回上一页</a>
			 --></div>
	<div class="fl noticeBox"><img src="pc/images/ico_trumpet.png" />
		<div class="noticeBar">
			<ul>
				<li>当前暂无消息</li>
			</ul>
		</div>
	</div>
</div>
<div class="clear"></div>


<div class="mainContent" style="padding-bottom:20px;">
	<div class="main-title">
		<h2></h2>
		<div>

			<div class="publicBtn fl file-box">Excel上传
				<input id="myfile" type="file" onchange="uploadFile()" />
			</div>
		</div>
	</div>
	<table id="table" width="100%">
		<thead>
		<tr>
            <th width="200">职位描述</th>
            <th>工作领域</th>
            <th>工作任务</th>
            <th>学习知识点</th>
            <th>关联课程</th>
			<!-- <th>技能模块</th>
			<th>子技能</th>
			<th>知识点</th>
			<th>对应课程</th> -->
		</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
</div>

<div id="Popup">

</div>
<div id="popupBackground"  class="mb"></div>


<div class="clear"></div>



<script>
    var result = '${result}';
    result = JSON.parse(result);
</script>
<script src="pc/js/extends/jquery-1.11.2.min.js"></script>
<script src="pc/js/extends/bootstrap-datetimepicker.min.js"></script>
<script src="pc/js/extends/bootstrap-datetimepicker.zh-CN.js"></script>


<script src="pc/js/extends/jquery.page.js"></script><!--翻页插件-->

<script src="pc/js/cores/Alert.js"></script><!--弹出盒-->
<script src="pc/js/cores/public.js"></script><!--公共-->

<script src="pc/js/extends/trumbowyg.js"></script><!--编辑器插件-->
<script src="pc/js/extends/trumbowyg.base64.min.js"></script><!--编辑器插件-->
<%--<script src="pc/js/modules/teacherPostSkills.js?f=<%=System.currentTimeMillis()%>"></script>--%>

<script>

    $(function() {
        var jsonStr = JSON.parse(getQueryString("jsonStr"));
        console.log(jsonStr,332);
        getTPSDData(jsonStr.id);
        editInit();
    });

    function uploadFile(){
        var crowd_file = $('#myfile')[0].files[0];
        var formData = new FormData();
        formData.append("file",$('#myfile')[0].files[0]);
        $.ajax({
            url:'skill/model-import',
            dataType:'json',
            type:'POST',
            async: false,
            data: formData,
            processData : false, // 使数据不做处理
            contentType : false, // 不要设置Content-Type请求头
            success: function(data){
                if (data.code == 200) {
                    alert('上传成功！');
                }

            },
            error:function(response){
                console.log(response);
            }
        });
	}

    function editInit(){
        $(document).off("click", "#Popup .closes").on("click", "#Popup .closes", function() { //关闭弹窗
            $("#Popup").css("display", "none").html("");
            $("#popupBackground").css("display","none");
        });
        $(".weight").off("click").click(function(){//权重点击
            var $_self=self;
            $("#Popup").css("display","block").html(weightValue());
            $("#popupBackground").css("display","block");
            var courseId=parseInt($(this).parents("tr").attr("courseId"));
            var parameter={
                "courseId":courseId
            };

            $.ajax({
                type: "post",
                url: "getSourceSetByTeaIdOrCourseIdByPost",
                async: true,
                data: {
                    "jsonStr": JSON.stringify(parameter)
                },
                async: true,
                success: function(msg) {
                    //获取院系
                    var msgNew = JSON.parse(msg);

                    if(msgNew.sorceMap){
                        $("#selectWeight option").eq(msgNew.sorceMap.classPerformance*10-1).attr("selected","selected");

                    }else{
                        $("#selectWeight option").eq(3).attr("selected","selected");

                    }

                    $(".preservation").off("click").click(function() {//权重保存

                        if(msgNew.sorceMap){
                            var souceMark=0;
                            var parameter = {
                                "courseId": courseId,
                                "classPerformance":parseFloat( $("#selectWeight option:selected").val()),
                                "bad":msgNew.sorceMap.bad,
                                "excellent": msgNew.sorceMap.excellent,
                                "good": msgNew.sorceMap.good,
                                "inso": msgNew.sorceMap.inso,
                                "souceMark":msgNew.sorceMap.souceMark
                            };
                        }else{
                            var parameter = {
                                "courseId": courseId,
                                "classPerformance": parseFloat($("#selectWeight option:selected").val()),
                                "bad":1,
                                "excellent": 4,
                                "good": 3,
                                "inso": 2,
                                "souceMark":0
                            };
                        }



                        $_self.sub(parameter);
                    });

                },
                error: function(data, status, xhr) {
                    var json = JSON.stringify({
                        "pageName": "error"
                    });
                    window.location.href = "skipPage?jsonStr=" + json;

                }
            });
        });
	}

    //获取url参数值
    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var reg_rewrite = new RegExp("(^|/)" + name + "/([^/]*)(/|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        var q = window.location.pathname.substr(1).match(reg_rewrite);
        if(r != null){
            return unescape(r[2]);
        }else if(q != null){
            return unescape(q[2]);
        }else{
            return null;
        }
    }
    function getTPSDData(id){
        $.ajax({
			type: "get",
            url: "querySkillInfo?skillId=" + id,
            success: function(data, status, xhr) {
                console.log(data,665);
				if(data.code == 200){
					data = data.data;
				}
                add2(data);
            },
            error: function(data, status, xhr) {
                //loading1.hide();
                var json = JSON.stringify({
                    "pageName": "error"
                });
                //window.location.href = "skipPage?jsonStr=" + json;

            }
        });
	}
	//点击修改
    function editLevel(obj) {
        console.log(obj);
        console.log(obj.data("data").id);
        console.log(obj.data("data").name);
        let eid = obj.data("data").id;
        let ename = obj.data("data").name
		console.log(66666);
        let editHtml = editShowBox(eid,ename);
        $("#Popup").css("display", "block").html(editHtml);
        $("#popupBackground").css("display","block");
    }
	//修改保存
	function editSubmit(id){
		console.log(id);
		console.log($("#selectWeight").val());
        $.ajax({
            type: "get",
            url: "updateSkillInfo?skillId=" + id + "&name=" + $("#selectWeight").val(),
            success: function(data, status, xhr) {
                if(data.code == 200){
                    var jsonStr = JSON.parse(getQueryString("jsonStr"));
                    getTPSDData(jsonStr.id);
                    $(".closes").trigger("click");
                }
            },
            error: function(data, status, xhr) {
                //loading1.hide();
                var json = JSON.stringify({
                    "pageName": "error"
                });
                //window.location.href = "skipPage?jsonStr=" + json;

            }
        });
	}
    function add2(arr) {
        $("#table tbody").empty();
        console.log(arr);
        //1职位
        $(".main-title h2").html(arr[0].name);
        item1 = arr[0].childrenList;
        //2描述
        $(".item1").html(item1[0].name);
        //描述修改
        let item1Btn = $("<div class='edit-table-item'>修改</div>").data("data", {
            id: item1[0].id,
            name: item1[0].name
        }).click(function() {
            editLevel($(this))
        });
        let tr = $("<tr></tr>");
        let td = $("<td></td>").html(item1[0].name).append(item1Btn);
        tr.append(td);
        $("#table tbody").append(tr);
        //3技能模块
        item2 = item1[0].childrenList;
        $.each(item2, function(i, d) {
            let item2Btn = $("<div class='edit-table-item'>修改</div>").data("data", {
                id: d.id,
                name: d.name
            }).click(function() {
                editLevel($(this))
            });
            let td = $("<td></td>").html(d.name).append(item2Btn);
            if (d.childrenList.length != 0) {
                td.attr("rowspan", d.childrenList.length);
            }
            if (i > 0) {
                let tr = $("<tr></tr>");
                tr.append(td);
                $("#table tbody").append(tr);
                if (d.childrenList.length != 0) {
                    //加标识，以便之后添加child
                    tr.addClass("itemnum_" + d.childrenList[0].id);
                } else {
                    tr.append("<td></td>");
                    tr.append("<td></td>");
                    tr.append("<td></td>");
                }
                console.log(td);
            } else {
                console.log($("#table tbody tr").eq(0));
                $("#table tbody tr").eq(0).append(td);
                if (d.childrenList.length != 0) {
                    //加标识，以便之后添加child
                    $("#table tbody tr").eq(0).addClass("itemnum_" + d.childrenList[0].id);
                } else {
                    tr.append("<td></td>");
                    tr.append("<td></td>");
                    tr.append("<td></td>");
                }

            }

            let item3 = d.childrenList;
            //console.log(item3);
            if (item3 && item3.length > 0) {
                $.each(item3, function(i2, d2) {
                    let item3Btn = $("<div class='edit-table-item'>修改</div>").data("data", {
                        id: d2.id,
                        name: d2.name
                    }).click(function() {
                        editLevel($(this))
                    });
                    let td2 = $("<td></td>").html(d2.name).append(item3Btn);
                    //下一级知识点
                    let zsd = d2.childrenList;
                    if (i2 == 0) {
                        $(".itemnum_" + d.childrenList[0].id).append(td2);
                        if (zsd.length != 0) {
                            let item4Btn = $("<div class='edit-table-item'>修改</div>").data("data", {
                                id: zsd[0].id,
                                name: zsd[0].name
                            }).click(function() {
                                editLevel($(this))
                            });
                            let td3 = $("<td></td>").html(zsd[0].name).append(item4Btn);
                            $(".itemnum_" + d.childrenList[0].id).append(td3);
                            //对应课
                            if (zsd[0].childrenList.length != 0) {
                                let item5Btn = $("<div class='edit-table-item'>修改</div>").data("data", {
                                    id: zsd[0].childrenList[0].id,
                                    name: zsd[0].childrenList[0].name
                                }).click(function() {
                                    editLevel($(this))
                                });
                                let stra = 'skipPage?jsonStr={"pageName":"myCourse","paramData":{"courseId":226}}';
                                let item5a = $("<div class='edit-table-item'><a style='color:#fff;font-size:14px;' href='"+ stra +"'>查看</a></div>");
                                let td4 = $("<td></td>").html(zsd[0].childrenList[0].name).append(item5Btn,item5a);
                                $(".itemnum_" + d.childrenList[0].id).append(td4);
                            } else {
                                let td4 = $("<td></td>");
                                $(".itemnum_" + d.childrenList[0].id).append(td4);
                            }
                        } else {
                            $(".itemnum_" + d.childrenList[0].id).append("<td></td>");
                            $(".itemnum_" + d.childrenList[0].id).append("<td></td>");
                        }
                        console.log(d2.childrenList, 55);
                    } else {
                        console.log($(".itemnum_" + d.childrenList[0].id), 333);
                        let tr2 = $("<tr></tr>");
                        tr2.append(td2);
                        $(".itemnum_" + d.childrenList[0].id).after(tr2);
                        if (zsd != 0) {
                            let item4Btn = $("<div class='edit-table-item'>修改</div>").data("data", {
                                id: zsd[0].id,
                                name: zsd[0].name
                            }).click(function() {
                                editLevel($(this))
                            });
                            let td3 = $("<td></td>").html(zsd[0].name).append(item4Btn);
                            tr2.append(td3);
                            //对应课
                            if (zsd[0].childrenList.length != 0) {
                                let item5Btn = $("<div class='edit-table-item'>修改</div>").data("data", {
                                    id: zsd[0].childrenList[0].id,
                                    name: zsd[0].childrenList[0].name
                                }).click(function() {
                                    editLevel($(this))
                                });
                                //skipPage?jsonStr={%22pageName%22:%22myCourse%22,%22paramData%22:{%22courseId%22:192}}
                                //
                                let stra = 'skipPage?jsonStr={"pageName":"myCourse","paramData":{"courseId":192}}';
                                let item5a = $("<div class='edit-table-item'><a style='color:#fff;font-size:14px;' href='"+ stra +"'>查看</a></div>");
                                let td4 = $("<td></td>").html(zsd[0].childrenList[0].name).append(item5Btn,item5a);
                                tr2.append(td4);
                            } else {
                                let td4 = $("<td></td>");
                                tr2.append(td4);
                            }
                        } else {
                            tr2.append("<td></td>");
                            tr2.append("<td></td>");
                        }
                    }
                });
            }
        });
        //职位描述所占行数
        $("#table tbody tr").eq(0).find("td").eq(0).attr("rowspan", $("#table tbody tr").length);
    }

    function editShowBox(id,name) { //修改弹出层
        return '<div class="weightValue">' +
            '<p class="popup_contenthead">内容修改<span class="fr closes"><img src="pc/images/ico_alertDel.png" alt="叉" /></span></p>' +
            '<div class="clear"></div>' +
            '<div class="pop_main">' +
            '<div class="inputRight">' +
            '<input id="selectWeight" class="publicText" type="text" value="'+ name +'" />' +
            '</div>' +
            '<div class="clear"></div>' +
            '<div class="prompt">' +
            '</div>' +
            '<div class="clear"></div>' +
            '</div>' +
            '<div class="down">' +
            '<div onclick="editSubmit('+ id +')" class="publicBtn preservation" saveid="'+id+'">保存修改</div>' +
            '</div>' +
            '</div>';
    }

</script>
</body>

</html>